<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>博客</title>
    <link href="<%=basePath%>bootstrap/css/blog-home.css"/>
    <link href="<%=basePath%>bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<%=path%>/index.jsp" target="_self">博客</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="<%=basePath %>index.jsp">网站首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="<%=path%>/login.jsp" target="_self">登录</a></li>
                <li><a href="#" class="btn btn-default">注册</a></li>
            </ul>
        </div>
    </div>
</nav>
<c:if test="${null!=successMsg}">
    <div class="container" style="position: absolute;top: 60px;left: 380px">
        <div class="alert alert-success">
                ${successMsg}
        </div>
    </div>
    <%
        request.getSession().removeAttribute("successMsg");
    %>
</c:if>
<c:if test="${null!=errorMsg}">
    <div class="container" style="position: absolute;top: 60px;left: 380px">
        <div class="alert alert-warning">
                ${errorMsg}
        </div>
    </div>
    <%
        request.removeAttribute("errorMsg");
    %>
</c:if>
<div class="container ">
    <div class="row col-md-3" style="position: absolute;left:700px; top: 150px">
        <form class="form-horizontal" name="register_form"
              action="<%=basePath%>RegisterServlet" method="POST"
              onsubmit="return isValidate()"><!--客户端验证-->
            <fieldset>
                <div id="legend form-group">
                    <legend class="caption"><h3 style="text-align: center;">注册页面</h3></legend>
                </div>
                <div class="form-group">
                    <!-- Username -->
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名" class="form-control">
                    <div id="n"></div>
                </div>
                <div class="form-group">
                    <!-- E-mail -->
                    <label  for="email">E-mail</label>
                    <input type="text" id="email" name="email" placeholder="请输入邮箱地址" class="form-control">
                    <div id="mail1"></div>
                </div>
                <div class="form-group">
                    <!-- Password-->
                    <label class="control-label" for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码" class="form-control">
                    <div id="mima"></div>
                </div>
                <div class="form-group">
                    <!-- Password -->
                    <label class="control-label" for="password_confirm">密码（确认）</label>
                    <input type="password" id="password_confirm" name="password_confirm" placeholder="请再次输入密码" class="form-control">
                    <div id="mima2"></div>
                </div>
                <div class="form-group">
                    <input type="text" id="yanzhen" style="width: 140px;height: 40px"/>
                    <img src="servlet/IdentityServlet" id="identity" onload="btn.disabled=false;" />
                    <input type=button value="换个图片" onclick="reloadImage()" id="btn">
                    <div id="message"></div>
                    <div id="path" style="display:none;"><%=path%></div>
                </div>
                <div class="form-group" style="text-align: center">
                    <button type="submit" class="btn btn-success" style="width: 80px;height: 50px">注册</button>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="<%=path%>/login.jsp" target="_self" class="btn btn-info" style="width: 80px;height: 50px;line-height: 40px;">登录</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<div class="container" style="position: absolute;bottom: 10px;left: 320px">
    <hr>
    <footer style="text-align: center">
        <div class="row">
            <div class="col-lg-12">
                <p>
                    &middot;网站创建到目前访问人数：<%=(Integer)session.getAttribute("num") %>
                </p>
            </div>
        </div>
    </footer>
</div>
<%--<div><audio autoplay="autoplay" loop="true" controls="controls"><source src="music/1.mp3"></audio></div>--%>
</body>
<script type="text/javascript">
    function isValidate() {
        var username = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        var password_confirm = document.getElementById("password_confirm").value;
        var yanzhen = document.getElementById("yanzhen").value;
        var n=document.getElementById("n").innerHTML;
        var info = document.getElementById("message").innerHTML;
        var mail=document.getElementById("mail1").innerHTML;
        if (username == "" || email == "" || password == "" || password_confirm == ""||yanzhen=="") {
            alert("用户名、邮箱、密码、确认密码为必填项、验证码必填！");
            return false;
        }else if(password.length<6||password.length>11){
            return false;
        } else if (password != password_confirm) {
            alert("密码和密码（确认）必须相同！");
            return false;
        }else if(info!=""){
            return false;
        }else if(n!="") {
            return false;
        }else if(mail!=""){
            return false;
        }else{
            return true;
        }
    }
    document.getElementById("email").onblur=function(){
        var email = document.getElementById("email").value;
        if(email.length==0){
            document.getElementById("mail1").innerHTML="<span style='color:red;'>邮箱不为空</span>";
        }else if(!email.endsWith(".com")||email.length<10||email.length>18||email.search("@")==-1){
            document.getElementById("mail1").innerHTML="<span style='color:red;'>邮箱格式不正确</span>"
        }else{
            document.getElementById("mail1").innerHTML="";
        }
    }
    document.getElementById("password").onblur=function (){
        var password = document.getElementById("password").value;
        if(password.length==0){
            document.getElementById("mima").innerHTML="<span style='color:red;'>密码不为空</span>";
        }else if(password.length<6||password.length>11){
            document.getElementById("mima").innerHTML="<span style='color:red;'>密码长度必须大于6位，小于12位</span>";
        }else{
            document.getElementById("mima").innerHTML="";
        }
    }
    document.getElementById("password_confirm").onblur=function (){
        var password = document.getElementById("password").value;
        var password_confirm = document.getElementById("password_confirm").value;
        if(password_confirm.length==0){
            document.getElementById("mima2").innerHTML="<span style='color:red;'>确认密码不能为空</span>";
        }else if(password!=password_confirm){
            document.getElementById("mima2").innerHTML="<span style='color:red;'>密码不一致</span>";
        }else {
            document.getElementById("mima2").innerHTML="";
        }
    }
    document.getElementById("username").onblur=function (){
        var username=document.getElementById("username").value;
        var path = document.getElementById("path").innerText;
        var xmlhttp = createXMLHttpRequest();
        xmlhttp.onreadystatechange = function () {      //监听ajax数据返回
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                n.innerHTML="<span style='color:red;'>用户名已存在</span>";
            }else{
                n.innerHTML="";
            }
        }
        xmlhttp.open("POST", path+"/LoginServlet?method=ajax2&name=" + username, true);
        xmlhttp.send();
    }

    function createXMLHttpRequest() {
        var xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            //适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                //适用于IE5及更早的版本
                try {
                    xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {

                }
            }
        }
        return xmlHttp;
    }
    document.getElementById("yanzhen").onblur = function (){
        var yanzhen = document.getElementById("yanzhen").value;
        var message = document.getElementById("message");
        var path = document.getElementById("path").innerText;
        if (yanzhen == "") {
            return false;
        }
        var xmlhttp = createXMLHttpRequest();
        xmlhttp.onreadystatechange = function () {      //监听ajax数据返回
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = xmlhttp.responseText;
                message.innerHTML ="";
                return;
            } else {
                message.innerHTML = "<span id='info' style='color:red;'>验证码错误</span>";
                setTimeout(reloadImage,2000);
            }
        }
        xmlhttp.open("POST", path+"/LoginServlet?method=ajax1&name=" + yanzhen, true);
        xmlhttp.send();
    }
    function reloadImage() {
        document.getElementById('btn').disabled = true;
        document.getElementById('identity').src = 'servlet/IdentityServlet?ts=' + new Date().getTime();
    }
</script>
</html>